<template>
	<view class="all">
		<h2 style="color: black;">成为创作者</h2>
		<text>昵称</text>
		<u--input ref="nicknameInput" border="bottom" v-model="nickNames" class="nickname-input"></u--input>
		<image :src="`/static/${avatarUrl}`" class="avatar" mode="widthFix" @click="chooseImage"></image>
		<text id="avatar-text">你的头像,至少160*160px</text><br>
		<text>正在创作</text>
		<u--input ref="creativityInput" lass="creativity" v-model="creativity" border="bottom"
			placeholder="一件什么样的的事情呐"></u--input>
		<text>创作分类</text>
		<u-picker :show="isCategoryPickerShow" :columns='columns' @confirm="confirmCategory" @cancel="cancelCategory"
			confirm-text="确认" cancel-text="取消"></u-picker>
		<view style="border-bottom: 1px #ccc solid;"><text style="color: #ccc;font-size: 28rpx;"
				@click="isCategoryPickerShow = true">{{categoryName}}</text></view>
		<text>创作规模</text>
		<u-picker :closeOnClickOverlay='true' @close="show = false" :show="isScalePickerShow" :columns='scales'
			@confirm="confirmScale" @cancel="cancelScale" confirm-text="确认" cancel-text="取消"></u-picker>
		<view style="border-bottom: 1px #ccc solid;">
			<text style="color: #ccc;font-size: 28rpx;" @click="isScalePickerShow = true">{{scaleName}}</text>
		</view>
		<text>封面图(选填)</text>
		<u-upload width="700rpx" height="400rpx" :action="action"></u-upload>
		<button style="background-color: #ff724e	;color: white;width: 100%;margin-top: 30rpx;"
			@click="submit()">提交</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				nickNames: '',
				creativity: '',
				isCategoryPickerShow: false, // 控制分类选择器是否显示
				isScalePickerShow: false, // 控制规模选择器是否显示
				avatarUrl: 'kbblnt.jpg', // 初始化头像URL
				categoryValue: 0, // 默认选择第一个选项
				categoryName: '请选择分类',
				scaleValue: 0, // 用于绑定创作规模选择值
				scaleName: '请选择规模',
				columns: [
					['中国', '美国', '日本']
				],
				scales: [
					['个人', '团体', '工作']
				],
				fileList: [{

				}],
				action: '', // 封面图图片
			};
		},
		methods: {
			showCategoryPicker() {
				this.isCategoryPickerShow = true;
			},
			showScalePicker() {
				this.isScalePickerShow = true;
			},
			confirmCategory(e) {
				// 处理确认逻辑
				this.categoryName = e.value[0]
				this.isCategoryPickerShow = false;
			},
			cancelCategory() {
				// 处理取消逻辑
				this.isCategoryPickerShow = false;
			},
			confirmScale(e) {
				// 处理确认逻辑
				this.scaleName = e.value[0]
				this.isScalePickerShow = false;
			},
			cancelScale() {
				// 处理取消逻辑
				this.isScalePickerShow = false;
			},
			chooseImage() {
				uni.chooseImage({
					count: 1, // 最多可以选择的图片数量
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: (res) => {
						// 选择成功后，可以在这里处理图片
						const tempFilePaths = res.tempFilePaths; // 图片的临时文件路径
						// 您可以在这里使用 FileReader API 来读取图片，或者使用其他方式上传图片
					},
					fail: (error) => {
						// 选择失败后的回调
						console.error('选择图片失败：', error);
					},
				});
			},
			filterBadWords(inputText) {
				const badWordsList = ["操", "畜生", "逼"]; // 替换为实际的不当词汇列表
				return badWordsList.some(badWord =>
					inputText.toLowerCase().includes(badWord.toLowerCase())
				);
			},
			validateForm() {
				const nickname = this.$refs.nicknameInput.value; // 假设您已经为昵称输入框设置了ref
				// 校验昵称
				if (!this.nickNames || this.nickNames.trim() === '') {
					uni.showToast({
						title: '请输入昵称',
						icon: 'none'
					});
					return false;
				}
				// 校验头像
				if (!this.avatarUrl) {
					uni.showToast({
						title: '请选择头像',
						icon: 'none'
					});
					return false;
				}
				// 校验正在创作的内容
				if (!this.creativity || this.creativity.trim() === '') {
					uni.showToast({
						title: '请输入正在创作的内容',
						icon: 'none'
					});
					return false;
				}
				// 校验创作分类
				if (this.categoryName === '请选择分类') {
					uni.showToast({
						title: '请选择创作分类',
						icon: 'none'
					});
					return false;
				}
				// 校验创作规模
				if (this.scaleName === '请选择规模') {
					uni.showToast({
						title: '请选择创作规模',
						icon: 'none'
					});
					return false;
				}
				if (this.filterBadWords(nickname)) {
					uni.showToast({
						title: '昵称包含不当词汇，请修改。',
						icon: 'none'
					});
					return false;
				}
				// 检查正在创作的内容
				const creativity = this.$refs.creativityInput.value; // 假设您已经为创作内容输入框设置了ref
				if (this.filterBadWords(creativity)) {
					uni.showToast({
						title: '创作内容包含不当词汇，请修改。',
						icon: 'none'
					});
					return false;
				}
				return true
			},
			submit() {
				if (this.validateForm()) {
					uni.switchTab({
						url: "/pages/mine/mine"
					});
				}
			}
		},

	}
</script>
<style>
	.all {
		width: 95%;
		margin: auto;
		line-height: 90rpx;
		font-size: 30rpx;
	}

	.all text {
		color: #f60;
	}

	.step {
		position: relative;
		right: 120rpx;
		top: 30rpx;
	}

	//头像
	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		display: inline-block;
		vertical-align: middle;
		/* 垂直对齐 */
		margin-right: 10rpx;
		cursor: pointer;
		/* 添加指针样式，表示可点击 */
	}

	#avatar-text {
		display: inline-block;
		vertical-align: middle;
		/* 垂直对齐 */
		color: #ccc;
		font-size: 18rpx;
		font-weight: 300;
		margin: 20rpx 0rpx;
	}

	.u-input {
		border-bottom: 1px solid #bbb;
	}

	.presentation {
		width: 700rpx;
		height: 400rpx;
		border: 2px #bbb solid;
	}

	/* 调整 <select> 元素的样式 */
	select {
		display: inline-block;
		/* 使选择器与 input 元素水平对齐 */
		width: 100%;
		/* 使选择器宽度与输入框宽度相同 */
		border-bottom: 1px solid #bbb;
		/* 添加底边框 */
		border-top: 0;
		/* 隐藏上边框 */
		border-left: 0;
		/* 隐藏左边框 */
		border-right: 0;
		/* 隐藏右边框 */
		font-size: 28rpx;
		/* 设置字体大小 */
		color: #bbb;
		/* 设置字体颜色 */
		background-color: #fff;
		/* 设置背景颜色 */
		outline: none;
		/* 移除焦点框 */
	}

	/* 调整选项的样式 */
	option {
		font-size: 28rpx;
		/* 设置字体大小 */
		color: #bbb;
		/* 设置字体颜色 */
	}
</style>